import React, { Component } from 'react'
import { get, post } from '@/utils/requestUtil.js'
import moment from 'moment'
import _ from 'lodash'
import Avatar from '@/components/viewWidget/Avatar'
import { Spin, message } from 'antd'
import { BookFilled, PhoneFilled, MailFilled, CompassFilled, TeamOutlined, ClockCircleFilled } from '@ant-design/icons'
import Button from '@/components/basicWidget/Button'
import './index.css'

class CustomerCard2 extends Component {

    constructor(props) {
        super(props)
        this.state = {
            customer: { id: null },
            loading: true,
            custOtherData: null,
            custStatus: null
        }
    }

    async componentDidMount() {
        const { customerId } = this.props
        let customer = _.cloneDeep(this.props.customer)

        //获取客户基本信息
        if (customer) {
            await new Promise(resolve => { this.setState({ customer }, resolve) })
        } else if (!customer && customerId) {
            const response = await get(`/customer/get/${customerId}`)
            if (response && response.data) customer = response.data
        }

        //获取客户其他信息
        let custOtherData = null
        if (customer) {
            const response = await get(`/customer/get/other/${customer.id}`)
            if (response && response.data) {
                custOtherData = response.data
                //计算客户加入的天数
                let joinDays = 0
                const nowDate = new Date()
                const joinDate = moment(custOtherData.createDate)._d
                if (joinDate > nowDate) joinDays = 0
                else {
                    joinDays = (nowDate - joinDate) / (1 * 24 * 60 * 60 * 1000)
                }
                custOtherData.joinDays = Math.floor(joinDays)
            }
        }

        //查询当前登录用户对此客户的状态
        let custStatus = null
        if (customer && this.props.user) {
            const response = await get(`/customer/${customer.id}/status/${this.props.user.id}`)
            if (response && response.data) custStatus = response.data
        }

        await new Promise(resolve => {
            this.setState({
                customer,
                customerId,
                custOtherData,
                custStatus
            }, resolve)
        })

        if (customer && this.props.user && custOtherData && custStatus) {
            await new Promise(resolve => { this.setState({ loading: false }, resolve) })
        }
    }

    //关注操作
    onAttentionHandler = async () => {
        const { customer } = this.state
        const { user } = this.props
        if (customer.id === user.id) {
            message.warning('您不能关注自己')
            return
        }
        await post(`/customer/${customer.id}/follow/${this.props.user.id}`)
        await this.flushCustomerAndStatus()
    }

    flushCustomerAndStatus = async () => {
        let customer = null
        let custStatus = null
        const response = await get(`/customer/get/${this.state.customer.id}`)
        if (response && response.data) customer = response.data
        const statusResponse = await get(`/customer/${this.state.customer.id}/status/${this.props.user.id}`)
        if (statusResponse && statusResponse.data) custStatus = statusResponse.data
        await new Promise(resolve => {
            this.setState({
                customer,
                custStatus
            }, resolve)
        })
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='CustomerCard2-main'>
                <div className='CustomerCard2-avatar'>
                    <Avatar
                        src={this.state.customer.avatarUrl}
                        alt='avatar'
                        isCircle={true}
                    // style={{ width: '120px', height: '120px', position: 'absolute', top: '-30px' }}
                    ></Avatar>
                </div>
                <div className='CustomerCard2-basic-info'>
                    <div className='CustomerCard2-basic-info-top'>
                        <div className='CustomerCard2-basic-info-name'>{this.state.customer.nickname}</div>
                        <div className='CustomerCard2-basic-info-button'>
                            <Button
                                style={this.state.custStatus.followStatus === 'true' ?
                                    { color: 'var(--font-ten)' }
                                    : null}
                                onClick={this.onAttentionHandler}
                            >{this.state.custStatus.followStatus === 'true' ? '已关注' : '关注'}</Button>
                        </div>
                    </div>

                    <div className='CustomerCard2-data-statistics'>
                        <div className='CustomerCard2-data-statistics-item'>
                            <span style={{ fontWeight: 'bold' }}>{this.state.custOtherData.blogNumber}&nbsp;&nbsp;</span>
                            <span style={{ color: 'var(--font-ten)' }}>博客</span>
                        </div>
                        <div className='CustomerCard2-data-statistics-item'>
                            <span style={{ fontWeight: 'bold' }}>{this.state.customer.fans}&nbsp;&nbsp;</span>
                            <span style={{ color: 'var(--font-ten)' }}>粉丝</span>

                        </div>
                        <div className='CustomerCard2-data-statistics-item'>
                            <span style={{ fontWeight: 'bold' }}>{this.state.customer.concern}&nbsp;&nbsp;</span>
                            <span style={{ color: 'var(--font-ten)' }}>关注</span>

                        </div>
                        <div className='CustomerCard2-data-statistics-item'>
                            <span style={{ fontWeight: 'bold' }}>{this.state.custOtherData.commentNumber}&nbsp;&nbsp;</span>
                            <span style={{ color: 'var(--font-ten)' }}>评论</span>

                        </div>
                        <div className='CustomerCard2-data-statistics-item'>
                            <span style={{ fontWeight: 'bold' }}>{this.state.custOtherData.collectionNumber}&nbsp;&nbsp;</span>
                            <span style={{ color: 'var(--font-ten)' }}>收藏</span>
                        </div>
                    </div>

                    <div className='CustomerCard2-data-basicInfo'>
                        <div><span><BookFilled />个性签名:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.personalizedSignature}</div>
                        <div><span><PhoneFilled />联系电话:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.phone ? this.state.customer.phone : '保密'}</div>
                        <div><span><MailFilled />电子邮箱:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.email ? this.state.customer.email : '保密'}</div>
                        <div><span><CompassFilled />地区:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.location ? this.state.customer.location : '保密'}</div>
                        <div><span><TeamOutlined />性别:&nbsp;&nbsp;&nbsp;</span>{this.state.customer.sex === 'man' ? '男' : this.state.customer.sex === 'woman' ? '女' : '保密'}</div>
                        <div><span><ClockCircleFilled />加入JmsBlog时间:&nbsp;&nbsp;&nbsp;</span>{moment(this.state.custOtherData.createDate).format('YYYY-MM-DD')}</div>
                    </div>
                </div>
            </div>
        )
    }
}

export default CustomerCard2
